import Taro, {Component} from '@tarojs/taro'
import {Picker, View, ScrollView} from '@tarojs/components'
import { AtCard, AtMessage } from 'taro-ui'
import moment from 'moment';
import {getMemberLeaveList} from './service'
import {leaveType, approveStatusList, getIndex} from '../../constant'
import './index.scss'

export default class attendance extends Component {

  config = {
    navigationBarTitleText: '请假记录',
  };

  constructor(props) {
    super(props);
    this.state = {
      dataList: [],
      date: moment(new Date()).format('YYYY-MM'),
      id: null,
      isOpen: false,
      bpmModalVisible: false,
      range: null
    }
  }

  componentDidMount() {
    this.initList();
  }

  initList(date = this.state.date) {
    getMemberLeaveList(date).then(res => {
      this.setState({dataList: res.list});
    })
  }

  onTimeChange(e) {
    this.setState({date: e.detail.value});
    this.initList(e.detail.value);
  }

  openDetail = (url) => {
    window.open(url);
  };

  render() {
    return (
      <View>
        <AtMessage />
        <View className='topBar'>
          <Picker mode='date' fields='month' value={this.state.date} onChange={this.onTimeChange.bind(this)}>
            <View className='picker'>
              {this.state.date} <View className='at-icon at-icon-chevron-down iconStyle'></View>
            </View>
          </Picker>
        </View>
        <ScrollView
          className='scrollView'
          scrollY
          scrollWithAnimation
        >
          {
            this.state.dataList &&
            this.state.dataList.map((item, index) => (
              <View className='card' key={index} style='margin: 15pt 0'>
                <AtCard
                  title={
                    <View style={`color: ${approveStatusList.find(colorItem => colorItem.value === item.dealStatus).color}`}>
                      {approveStatusList.find(statusItem => statusItem.value === item.dealStatus).label}
                    </View>
                  }
                >
                  <View className='card-content'>
                    <View className='contentItem'>
                      <View>开始时间:</View>
                      <View>{moment(item.leaveBeginTime).format('YYYY-MM-DD')}</View>
                    </View>
                    <View className='contentItem'>
                      <View>结束时间:</View>
                      <View>{moment(item.leaveEndTime).format('YYYY-MM-DD')}</View>
                    </View>
                    <View className='contentItem'>
                      <View>天数:</View>
                      <View>{item.leaveDay}天</View>
                    </View>
                    <View className='contentItem'>
                      <View>类型:</View>
                      <View>{leaveType[getIndex(leaveType,item.type)].label}</View>
                    </View>
                  </View>
                  <View className='card-btnBar'>
                    <View className='btn' onClick={() => this.openDetail(item.mobileUrl)}>详情</View>
                  </View>
                </AtCard>
              </View>
            ))
          }
        </ScrollView>
      </View>
    )
  }
}
